<template>
  <div class="chart_box">
    <div id="viewYxyj" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>
 
<script>
export default {
  name:'viewYxyj',
  props: {
    ecWidth: ''
  },
  data() {
    return {
      option: {
  xAxis: {
    type: 'category',
    boundaryGap: false
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '30%']
  },
  visualMap: {
    type: 'piecewise',
    show: false,
    dimension: 0,
    seriesIndex: 0,
    pieces: [
      {
        gt: 1,
        lt: 3,
        color: 'rgba(0, 0, 180, 0.4)'
      },
      {
        gt: 5,
        lt: 7,
        color: 'rgba(0, 0, 180, 0.4)'
      }
    ]
  },
  series: [
    {
      type: 'line',
      smooth: 0.6,
      symbol: 'none',
      lineStyle: {
        color: '#5470C6',
        width: 5
      },
      markLine: {
        symbol: ['none', 'none'],
        label: { show: false },
        data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
      },
      areaStyle: {},
      data: [
        ['2019-10-10', 200],
        ['2019-10-11', 560],
        ['2019-10-12', 750],
        ['2019-10-13', 580],
        ['2019-10-14', 250],
        ['2019-10-15', 300],
        ['2019-10-16', 450],
        ['2019-10-17', 300],
        ['2019-10-18', 100]
      ]
    }
  ]
}
                        
    };
    
  },
 
  mounted() {
    this.$nextTick(() => { //使用nextTick为了保证dom元素都已经渲染完毕
      this.init();

      });
  },
 
  methods: {
    init() {

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("viewYxyj"));

      // 绘制图表
      myChart.setOption(this.option);
      window.addEventListener('resize', function () {
      // 改变图表尺寸，在容器大小发生改变时需要手动调用
      myChart.resize();
    });
    },
  },
};
</script>
<style scoped>
.chart_box{
        width: 95%;
        height: 300px; 
        margin: 0 auto;
}
</style>
